<template>
  <div class="dashboard-container">
    <h1>欢迎使用南通评估系统</h1>
    
    <!-- 统计卡片 -->
    <div class="stat-cards">
      <a-card class="stat-card" :bordered="false">
        <template #title>
          <div class="card-title">
            <team-outlined />
            <span>用户数量</span>
          </div>
        </template>
        <div class="card-content">
          <div class="card-value">1,234</div>
          <div class="card-trend">
            <rise-outlined style="color: #52c41a;" />
            <span>比上周增长 12%</span>
          </div>
        </div>
      </a-card>
      
      <a-card class="stat-card" :bordered="false">
        <template #title>
          <div class="card-title">
            <interaction-outlined />
            <span>角色数量</span>
          </div>
        </template>
        <div class="card-content">
          <div class="card-value">12</div>
          <div class="card-trend">
            <fall-outlined style="color: #f5222d;" />
            <span>比上周减少 5%</span>
          </div>
        </div>
      </a-card>
      
      <a-card class="stat-card" :bordered="false">
        <template #title>
          <div class="card-title">
            <safety-outlined />
            <span>权限数量</span>
          </div>
        </template>
        <div class="card-content">
          <div class="card-value">86</div>
          <div class="card-trend">
            <rise-outlined style="color: #52c41a;" />
            <span>比上周增长 8%</span>
          </div>
        </div>
      </a-card>
      
      <a-card class="stat-card" :bordered="false">
        <template #title>
          <div class="card-title">
            <dashboard-outlined />
            <span>系统模块</span>
          </div>
        </template>
        <div class="card-content">
          <div class="card-value">24</div>
          <div class="card-trend">
            <rise-outlined style="color: #52c41a;" />
            <span>比上周增长 2%</span>
          </div>
        </div>
      </a-card>
    </div>
    
    <!-- 图表区域 -->
    <div class="chart-container">
      <a-card class="chart-card" :bordered="false" title="用户增长趋势">
        <div class="chart-placeholder">
          <!-- 此处应放置实际图表组件 -->
          <div class="mock-chart">
            <div class="mock-bar" style="height: 40%"></div>
            <div class="mock-bar" style="height: 60%"></div>
            <div class="mock-bar" style="height: 75%"></div>
            <div class="mock-bar" style="height: 55%"></div>
            <div class="mock-bar" style="height: 80%"></div>
            <div class="mock-bar" style="height: 70%"></div>
            <div class="mock-bar" style="height: 90%"></div>
          </div>
        </div>
      </a-card>
      
      <a-card class="chart-card" :bordered="false" title="系统活跃度">
        <div class="chart-placeholder">
          <!-- 此处应放置实际图表组件 -->
          <div class="mock-pie">
            <div class="mock-pie-segment" style="transform: rotate(0deg); background-color: #1890ff;"></div>
            <div class="mock-pie-segment" style="transform: rotate(120deg); background-color: #52c41a;"></div>
            <div class="mock-pie-segment" style="transform: rotate(240deg); background-color: #faad14;"></div>
          </div>
        </div>
      </a-card>
    </div>
    
    <!-- 最近活动 -->
    <a-card :bordered="false" title="最近活动">
      <a-list :data-source="activities" :loading="loading">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta>
              <template #title>{{ item.title }}</template>
              <template #description>{{ item.description }}</template>
              <template #avatar>
                <a-avatar :icon="item.icon" />
              </template>
            </a-list-item-meta>
            <div>{{ item.time }}</div>
          </a-list-item>
        </template>
      </a-list>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  TeamOutlined,
  InteractionOutlined,
  SafetyOutlined,
  DashboardOutlined,
  RiseOutlined,
  FallOutlined,
  UserOutlined,
  SettingOutlined,
  FileOutlined
} from '@ant-design/icons-vue'

// 模拟活动数据
const activities = ref([
  {
    title: '用户登录',
    description: '管理员用户登录了系统',
    time: '10分钟前',
    icon: () => h(UserOutlined)
  },
  {
    title: '系统设置变更',
    description: '更新了系统安全设置',
    time: '1小时前',
    icon: () => h(SettingOutlined)
  },
  {
    title: '角色权限更新',
    description: '为运营角色增加了数据导出权限',
    time: '2小时前',
    icon: () => h(SafetyOutlined)
  },
  {
    title: '用户注册',
    description: '新增了5名用户',
    time: '昨天',
    icon: () => h(TeamOutlined)
  },
  {
    title: '系统备份',
    description: '完成了每周系统备份',
    time: '2天前',
    icon: () => h(FileOutlined)
  }
])

const loading = ref(false)
</script>

<style scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  border-radius: 12px;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-value {
  font-size: 28px;
  font-weight: 700;
  color: #1890ff;
}

.card-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}

.chart-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.chart-card {
  border-radius: 12px;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 模拟图表样式 */
.mock-chart {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 20px;
}

.mock-bar {
  width: 40px;
  background: linear-gradient(to top, #1890ff, #69c0ff);
  border-radius: 4px 4px 0 0;
}

.mock-pie {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.mock-pie-segment {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%, 50% 50%);
}

/* 响应式布局 */
@media (max-width: 992px) {
  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .chart-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .stat-cards {
    grid-template-columns: 1fr;
  }
}
</style>
